import a from './Order_user.module.css'
import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Steps, Button, IndexBar, Tabs } from 'react-vant';
import TabBar1 from '../../components/TabBar/TabBar';
import NavBars from '../../components/NavBar/NavBar';
import { useDispatch, useSelector } from 'react-redux';
import axios from 'axios';
import { PullRefresh, Toast } from 'react-vant';
import { list_user } from '../../redux/Chat_reducer';


export default function Order_user() {
  const shop = useSelector(store => store.shop.shoplist.sid)
  const user = useSelector(store => store.user.userObj)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [active, setActive] = useState(1);
  const [state, setstate] = useState(1)
  useMemo(() => {
    switch (user.key) {
      case 'user': {
        setstate('user')
        break;
      }
      case 'business': {
        setstate('business')
        break;
      }
      case 'rider': {
        setstate('rider')
        break;
      }
    }
  }, [])
  const [list, setlist] = useState([])
  const user_change = (a) => {
    switch (a) {
      case 1:
        return "打包"
        break;
      case 2:
        return "堂食"
        break;
      case 3:
        return "外卖"
        break;
    }
  }
  const order_change = (a) => {
    switch (a) {
      case 0:
        return "已下单"
        break;
      case 1:
        return "正在制作"
        break;
      case 2:
        return "正在派送"
      case 3:
        return "已完成"
        break;
    }
  }
  const onRefresh = showToast => {
    return new Promise(resolve => {
      setTimeout(() => {
        if (showToast) {
          Toast.info('刷新成功')
        }
        resolve(true)
      }, 1000)
    })
  }
  const order_time = (a) => {
    let b = new Date(a)
    let year = b.getFullYear()
    let month = b.getMonth() + 1
    let day = b.getDate()
    let hour = b.getHours()
    let minutes = b.getMinutes()
    let second = b.getSeconds()
    return `下单时间：${year}-${month}-${day} ${hour}:${minutes}:${second}`
  }
  const nums = ((a) => {
    return a.reduce((b, c, d, e) => {
      return b += c.num
    }, 0)
  })
  const prices = ((a) => {
    return a.reduce((b, c, d, e) => {
      return b += c.num * c.price
    }, 0)
  })
  const que = async (a) => {
    console.log(a)
    a.state = 3
    let { data } = await axios.post('http://47.116.116.42:3000/sunt/update-num2', a)
    if (data) {

    }
  }
  const list_show = () => {
    let data = [...list]
    return data.map((item, index) => {
      if (item.state !== 3) {
        return <div key={item._id} className={a.model}>
          <div className={a.fontstate} onClick={() => { navigate('/details', { state: item }) }}>
            <span className={a.user_state}>{user_change(item.item.id)}</span>
            <span className={a.order_state}>{order_change(item.state)}</span>
          </div>
          <h3>{item.name}</h3>
          {item.clist.map((items) => {
            return <div key={items._id} style={{ display: 'inline-block', padding: '10px' }} onClick={() => { navigate('/details', { state: item }) }}>
              <img src={new URL('../../../public/imgs/'+items.path+'.jpg', import.meta.url)} className={a.img}></img>
              <p>{items.name}</p>
            </div>
          })}
          <div className={a.order_message}>
            <span>{order_time(item.time)}</span>
            <p>共：{item.num}件</p>
            <span>应付：{item.price}元</span>
            <span style={{ paddingLeft: '10px' }}>实付：{item.price}元</span>
            <hr></hr>
            <button className={a.button} style={{ display: user == 'rider' ? 'none' : 'bloack' }} onClick={() => {
              dispatch(list_user("用户骑手"))
              navigate('/chat')
            }}>联系骑手</button>
            <button className={a.button} style={{ display: user == 'user' ? 'none' : 'bloack' }} onClick={() => {
              dispatch(list_user("用户商家"))
              navigate('/chat')
            }}>联系商家</button>
            <button className={a.button} onClick={() => { que(item) }}>确认收货</button>
            <p>订单编号：{item._id}</p>
            <p>商家电话：{shop.telephone}</p>
          </div>
        </div>
      }
    })
  }
  const list_show2 = () => {
    let data = [...list]
    return data.map((item, index) => {
      if (item.state == 3) {
        return <div key={item._id} className={a.model}>
          <div className={a.fontstate} onClick={() => { navigate('/details', { state: item }) }}>
            <span className={a.user_state}>{user_change(item.item.id)}</span>
            <span className={a.order_state}>{order_change(item.state)}</span>
          </div>
          <h3>{item.name}</h3>
          {item.clist.map((items) => {
            return <div key={items._id} style={{ display: 'inline-block', padding: '10px' }} onClick={() => { navigate('/details', { state: item }) }}>
              <img src={new URL('../../../public/imgs/'+items.path+'.jpg', import.meta.url)} className={a.img}></img>
              <p>{items.name}</p>
            </div>
          })}
          <div className={a.order_message}>
            <span>{order_time(item.time)}</span>
            <p>共：{item.num}件</p>
            <span>应付：{item.price}元</span>
            <span style={{ paddingLeft: '10px' }}>实付：{item.price}元</span>
            <hr></hr>
            <button className={a.button} style={{ display: state == 'rider' ? 'none' : 'bloack' }} onClick={() => {
              dispatch(list_user("用户骑手"))
              navigate('/business/chat')
            }}>联系骑手</button>
            <button className={a.button} style={{ display: state == 'user' ? 'none' : 'bloack' }} onClick={() => {
              dispatch(list_user("用户骑手"))
              navigate('/business/chat')
            }}>联系商家</button>
            <button className={a.button} style={{ display: state == 'user' ? 'none' : 'bloack' }}>联系客户</button>
            <button className={a.button} onClick={() => { navigate(`/shop/${shop.shoplist}`) }}>再来一单</button>
            <p>订单编号：{item._id}</p>
            <p>商家电话：{shop.telephone}</p>
          </div>
        </div>
      }
    })
  }
  const getlist = async () => {
    let { data } = await axios.get('http://47.116.116.42:3000/sunt/list-card')
    console.log(data)
    setlist(data)
  }
  useEffect(() => {
    getlist()
  }, [])

  return (
    <div className={a.out}>
      <NavBars name='订单'></NavBars>
      <div className={a.stap}>
        <Tabs color='orange'>
          <Tabs.TabPane title='进行中' style={{ position: 'fixed', top: '0px' }} className={a.bar}>

            <PullRefresh
              onRefresh={() => onRefresh(true)}
              onRefreshEnd={() => { }}
            >
              {list_show()}</PullRefresh>
          </Tabs.TabPane>
          <Tabs.TabPane title='历史订单'>
            {list_show2()}
          </Tabs.TabPane>
        </Tabs>
      </div>
      <TabBar1></TabBar1>
    </div>
  )
}
